import React, { useContext } from "react";
import { View, StyleSheet, Dimensions, Text, Image } from "react-native";
import CommonContext from "@/utils/createContext";

const { width, scale } = Dimensions.get('window')
const ratio = width * scale / 1080

const InfoDetail = () => {

    const { transcationDetail } = useContext(CommonContext);

    return (
        <View>
            <Text style={{ ...styles.title, width: 292 * ratio, marginLeft: 34 * ratio, textAlign: 'center' }}>
                This is an on-chain rejection that did not send
                any funds. This on-chain rejection replaced
                all transactions with nonce 0.
            </Text>
            <View style={{ flexDirection: 'row', alignItems: 'center', marginTop: 21 * ratio }}>
                <View style={styles.signProcess}>
                    <Image source={require('@/assets/safe/rejection.png')} style={{ width: 12 * ratio, height: 12 * ratio }} />
                </View>
                <Text style={{ ...styles.title }}>On-chain rejection</Text>
                {transcationDetail.txStatus === 'SUCCESS' &&
                    <Text style={{ ...styles.title, color: '#0069F6', marginLeft: 10 * ratio }}>Success</Text>}
            </View>
            <View style={{ flexDirection: 'row', alignItems: 'center', marginTop: 25 * ratio }}>
                <View style={styles.signProcess}>
                    <Image source={require('@/assets/safe/rejection.png')} style={{ width: 12 * ratio, height: 12 * ratio }} />
                </View>
                <Text style={{ ...styles.title, color: '#FF000A' }}>On-chain rejection created</Text>
            </View>
            <View style={styles.signProcess}>
                <View style={{ ...styles.divider, height: 19 * ratio, backgroundColor: '#0069F6' }}></View>
            </View>
        </View>
    )
}

const styles = StyleSheet.create({
    title: {
        fontSize: 13,
        fontFamily: 'SourceHanSansCN-Medium, SourceHanSansCN',
        fontWeight: '500',
        color: '#2C2C2C',
        lineHeight: 21
    },
    divider: {
        width: 1,
        height: 22 * ratio,
        backgroundColor: '#0069F6'
    },
    signProcess: {
        width: 42 * ratio,
        alignItems: 'center'
    }
})
export default InfoDetail